<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>记账本</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
    <style>
        label {
            font-weight: normal;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-lg-8 col-lg-offset-2">
                <div class="row">
                    <h2 class="col-xs-6">记账本</h2>
                    <h2 class="col-xs-6 text-right">
                        <a href="/account/create/<%= u_id %>" class="btn btn-primary">添加账单 </a>
                        <form action="/logout" method="post" style="display: inline-block;">
                            <button class="btn btn-danger">退出登录</button>
                        </form>
                    </h2>
                </div>
                <hr />
                <div class="accounts">
                    <% accounts.forEach(item=> { %>
                        <div class="panel <%= item.type==1? 'panel-success':'panel-danger' %>">
                            <div class="panel-heading">
                                <%= moment.unix(item.time).format('YYYY-MM-DD') %>
                            </div>
                            <div class="panel-body">
                                <div class="col-xs-7" style="padding: 15px 0;">
                                    <span style="vertical-align: middle;word-wrap: break-word;">
                                        <%= item.title %>
                                    </span>
                                </div>
                                <div class="col-xs-1 text-center" style="padding: 15px 0;">
                                    <span class="label <%= item.type==1? 'label-success':'label-warning' %>">
                                        <%= item.type==1? '收入' :'支出' %>
                                    </span>
                                </div>
                                <div class="col-xs-3 text-right" style="padding: 15px 0;">
                                    <span style="vertical-align: middle;">
                                        <%= item.account%> 元
                                    </span>
                                </div>
                                <div class="col-xs-1 text-right" style="padding: 15px 1px;">
                                    <!-- data-target="#myModal" -->
                                    <a href="/account/<%= item._id %>/<%= item.u_id %>">
                                        <span class="glyphicon glyphicon-remove"
                                            url="/account/<%= item._id %>/<%= item.u_id %>" id="delBtn"
                                            aria-hidden="true" style="vertical-align: middle;"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <% }) %>
                </div>
            </div>
        </div>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            警告
                        </h4>
                    </div>
                    <div class="modal-body">
                        你确定要删除吗？
                    </div>
                    <div class="modal-footer">
                        <a type="button" class="btn btn-default" data-dismiss="modal">取消
                        </a>
                        <a type="button" id="btn" class="btn btn-primary">
                            确定
                        </a>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</body>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="/js/main.js"></script>
<script>
    $(function () {
        document.querySelector('.accounts').addEventListener('click', function (e) {
            e.preventDefault();
            if (e.target.id == 'delBtn') {
                $('#myModal').modal('show');
                var href = $(e.target).attr('url');
                ((href) => {
                    $('#btn').click(function () {
                        $('#myModal').modal('hide');
                        location.href = href;
                    })
                })(href)
            }
        })
    })
</script>

</html>